<!-- 对 divider 组件的编辑 -->
<template>
  <div class="socialicons-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-row>
              <el-col :span="12">
                <PaddingTop :defValue="data.config.paddingTop" formLabelWidth="90px"
                  :chgValue="(d)=>{data.config.paddingTop = d}" />
              </el-col>
              <el-col :span="12">
                <PaddingBottom :defValue="data.config.paddingBottom" formLabelWidth="90px"
                  :chgValue="(d)=>{data.config.paddingBottom = d}" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <TextAlign formLabelWidth="90px" :defValue="data.config.textAlign"
                  :chgValue="(d)=>{data.config.textAlign = d}" />
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="图标编辑" name="2">
            <div style="margin-bottom: 12px; text-align:right;">
              <el-button @click.stop="addList()" size="small" type="success">增 加</el-button>
            </div>
            <el-table size="mini" :data="data.slist" style="width: 100%" height="250">
              <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="选择图标" width="140">
                <template slot-scope="scope">
                  <span>
                    <el-select size="mini" v-model="data.slist[scope.$index].type" placeholder="请选择">
                      <el-option v-for="(item,index) in CTypeList" :key="index" :label="item.name" :value="item.type">
                        <a :class="'social-item '+item.className" style="color: #909399;"> <i
                            :class="'icon-social icon-'+item.className"></i>
                          {{item.name}}</a>
                      </el-option>
                    </el-select>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="链接">
                <template slot-scope="scope">
                  <span>
                    <el-input size="mini" v-model="data.slist[scope.$index].link" maxlength="200" @change="((val)=>{linkverify(val,data.slist[scope.$index])})
"></el-input>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="60">
                <template slot-scope="scope">
                  <el-button @click.stop="deleteRow(scope.$index)" type="text" size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import PaddingTop from '@/components/common/design/dialog/component/formitem/PaddingTop.vue'
import PaddingBottom from '@/components/common/design/dialog/component/formitem/PaddingBottom.vue'
import TextAlign from '@/components/common/design/dialog/component/formitem/TextAlign.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTSOCIALICONS, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data
      // coding ...

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })

      let defaultData = BackendjsFunctions.componentDefaultData('componentSocialicons')
      this.CTypeList = defaultData && defaultData.data && defaultData.data.ctype ? defaultData.data.ctype : []
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      activeName: '1',
      formLabelWidth: '80px',
      name: '社交图标',
      bjComponent: null,
      data: null,
      CTypeList: []
    }
  },
  watch: {
  },
  methods: {
    // .............
    linkverify (value, slistindexdata) {
      if (value && parseInt(slistindexdata.type) === 7) {
        return
      }
      if (value) {
        let bool = /^(http:\/\/|https:\/\/).*?/.test(value)
        if (!bool) {
          this.$message.error('请输入正确带http://或https://链接地址！')
        }
      }
    },
    close () {
      this.dialogShow = false
      this.activeName = '1'
      this.bjComponent = null
      this.data = null
    },
    saveclose () {
      let boolLink = true
      if (this.data.slist.length > 0) {
        this.data.slist.map(item => {
          if (item.link) {
            let bool = /^(http:\/\/|https:\/\/).*?/.test(item.link)
            if (!bool && item.type !== 7) {
              this.$message.error('请输入正确带http://或https://链接地址！')
              boolLink = false
            } else if (item.link.length > 200) {
              this.$message.error('输入链接地址长度超过200个字！')
              boolLink = false
            }
          }
        })
      }
      if (boolLink) {
        this.bjComponent.render.data = _.cloneDeep(this.data)
        BackendjsFunctions.saveComponent(this.bjComponent)
        this.close()
      }
    },
    // 新增
    addList () {
      let slist = this.data.slist
      slist.push({ type: 1, link: '', target: '_blank' })
      this.data.slist = JSON.parse(JSON.stringify(slist))
    },
    // 移除
    deleteRow (index) {
      let slist = this.data.slist
      slist.splice(index, 1)
      this.data.slist = JSON.parse(JSON.stringify(slist))
    }
  },
  components: {
    SetDesignDialog,
    PaddingTop,
    PaddingBottom,
    TextAlign
  }
}

</script>

<style scoped>
.edit-container-u {
  width: 750px;
  min-height: 350px;
}
.edit-container-u /deep/ .el-table thead {
  color:#555;
  font-size: 13px;
}
</style>
